<script setup lang="ts">
import { useEcharts } from '@hooks/useChart'
import type { EChartsCoreOption } from 'echarts/core'
import { ref, Ref, onMounted } from 'vue'

const sales: Ref<null | HTMLElement> = ref(null)

const init = () => {
  const options: EChartsCoreOption = {
    tooltip: {
      trigger: 'axis',
      padding: [8, 10, 8, 10],
      axisPointer: {
        type: 'line'
      },
      // 自定义提示框的内容
      formatter: (params: any[]) => {
        let result = ''
        params.forEach(el => {
          if (result === '') {
            result +=
              '<span style="font-size: 15px;margin-bottom: 10px">' + '销售额信息</span><br/>'
          }
          result +=
            '<span style="line-height: 40px">' +
            el.seriesName +
            ':<span style="font-size: 18px">' +
            el.value +
            '</span>' +
            'w<br/>' +
            '</span>'
        })
        return result
      }
    },
    legend: {
      show: true,
      textStyle: {
        color: '#1890ff'
      },
      data: [
        // '计划','今年','去年'
        {
          name: '计划',
          textStyle: {
            color: '#9ff' // 图例文字颜色
          }
        },
        {
          name: '今年',
          textStyle: {
            color: '#1890ff' // 图例文字颜色
          }
        },
        {
          name: '去年',
          textStyle: {
            color: '#e17' // 图例文字颜色
          }
        }
      ]
    },
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} w'
      }
    },
    grid: {
      left: 50,
      right: 30,
      top: 30,
      bottom: 20
    },
    series: [
      {
        name: '计划',
        type: 'line',
        data: [80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        itemStyle: {
          color: '#ffa96e' //图标颜色
        },
        lineStyle: {
          color: '#ffa96e' //连线颜色
        }
      },
      {
        name: '今年',
        type: 'line',
        data: [100, 119, 130, 111, 122, 126, 90, 70, 119, 150, 130, 160],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        itemStyle: {
          color: '#1890ff' //图标颜色
        },
        lineStyle: {
          color: '#1890ff' //连线颜色
        }
      },
      {
        name: '去年',
        type: 'line',
        data: [90, 159, 120, 91, 64, 150, 100, 120, 119, 109, 100, 110, 132, 123],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        itemStyle: {
          color: '#e17' //图标颜色
        },
        lineStyle: {
          color: '#e17' //连线颜色
        }
      }
    ]
  }
  useEcharts(sales.value as HTMLElement, options)
}

onMounted(init)
</script>
<template>
  <div
    ref="sales"
    :style="{
      width: '95%',
      height: '100%'
    }"
    style="margin: 0 auto"
  ></div>
</template>
<style lang="scss"></style>
